<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <meta name="cdnload" content="jquery" />
    <script src="./047-main.js"></script>
    <title>047-1</title>
    <link rel="stylesheet" href="./047-style.css" />
  </head>

  <body>
    <ul id="ulBox"></ul>
    <script>
      // 监听滚动条和屏幕高度进行控制
      function lazyload() {
        var oImgs = document.querySelectorAll('img.lazyload')
        var flag = true // 定义节流函数开关
        var n = 0 // 定义一个变量来保存加载的图片数量

        // 图片懒加载原理，在页面上的未可视区域添加一个滚动条事件，
        // 判断当图片距离文档顶部长度 <=  滚动条滚过的距离+窗口的高度 , 那么就进行图片优先加载
        window.onscroll = function () {
          // 判断是否为false
          if (!flag) {
            return
          }
          flag = !flag // 开关取反
          lazyLoad() // 执行加载图片函数
          // 节流函数
          setTimeout(function () {
            flag = !flag
          }, 200)
        }
        lazyLoad() // 初始化加载图片
        function lazyLoad() {
          // 注意这里将n赋值给i，原理就是页面没有滚动时候n不增加，图片不加载
          for (var i = n; i < oImgs.length; i++) {
            // 图片距离文档顶部长度 <=  滚动条滚过的距离+窗口的高度
            if (oImgs[i].offsetTop <= document.documentElement.scrollTop + window.innerHeight) {
              oImgs[i].src = oImgs[i].getAttribute('data-src') // 把data-src图片路径，复制给src
              n++ // 页面继续滚动n增加
            }
          }
        }
      }
      // 创建图片
      createImg()
      // 启动懒加载
      setTimeout(() => {
        lazyload()
      }, 50)
    </script>
  </body>
</html>
